<template>
	<!-- 订单详情 -->
	<view class="Jy_order_detail_page">
		<view class="Jy_order_detail_container">
			
			<!-- 待发货提示 -->
			<view class="title_liner" v-if="orderState == 2">
				<text>——</text>
				<text class="text">商家预计2天内发货</text>
				<text>——</text>
			</view>
			
			<!-- 订单超市未支付提醒 -->
			<view class="time_out_group" v-if="orderState == 1">
				<view class="time_out_box">
					<text>您的订单已生成,超过15分钟未支付自动取消</text>
				</view>
			</view>
			
			<!-- 订单具体状态交互 -->
			<view class="order_detial_state_group">
				<view class="icon_image_box">
					<image :src="orderStateList[orderState - 1].iamgeUrl" mode="aspectFill"></image>
				</view>
				<view class="text_box">
					<text>{{orderStateList[orderState - 1].state}}</text>
				</view>
			</view>
			
			
			<!-- 收货地址 -->
			<view class="address_mg_group">
				<view class="localtion_icon_box">
					<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/location.png" mode="aspectFit"></image>
				</view>
				<view class="address_mg_basic_group">
					<view class="address_mg_name_group">
						<view class="name_box">
							<text>收货人姓名</text>
						</view>
						<view class="phone_box">
							<text>13268788913</text>
						</view>
					</view>
					<view class="detail_address_box">
						<text>这是一条收货人的地址这是一条收货人的地址</text>
					</view>
				</view>
				<view class="update_address_group" v-if="orderState == 1">
					<view class="update_address_box" @click="getOrderAddress('1')">
						<text>修改</text>
					</view>
				</view>
			</view>
			
			<!-- 订单商品信息 -->
			<view class="Jy_order_swiper_list_container">
				<view class="store_info_group">
					<view class="left_store_info_box">
						<view class="store_icon_box">
							<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
						</view>
						<view class="store_name">
							<text>商家名称</text>
						</view>
						<view class="right_icon_box">
							<u-icon name="arrow-right" color="#000000" size="12"></u-icon>
						</view>
					</view>
					<view class="order_state_box">
						<text>{{orderState == 0 ? '交易关闭/交易已完成' : orderState == 1 ? '买家待付款' : orderState == 2 ? '等待商家发货' : orderState == 3 ? '商家已收货' : '交易完成,待评价'}}</text>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="shop_info_group" @click="getShoppingDetail()">
					<view class="shop_image_box">
						<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/logo.png" mode="aspectFill"></image>
					</view>
					<view class="shop_info_group">
						<view class="shop_name_box">
							<text>商品名称商品名称商品名称商品名称商品名称商品名称商品名称称商品名称称商品名称</text>
						</view>
						<view class="shop_parameter_box">
							<text>商品规格</text>
						</view>
					</view>
					<view class="shop_price_group">
						<view class="shop_price_box">
							<text>￥</text>
							<text>11.5</text>
						</view>
						<view class="shop_number_box">
							<text>x</text>
							<text class="number">1</text>
						</view>
					</view>
				</view>
				
				<!-- 订单实际付款 -->
				<view class="yin_paypaly_group">
					<view class="yin_paypaly_box">
						<text class="big_font">应付款</text>
						<text class="small_font mg_left">￥</text>
						<text class="big_font">11.5</text>
					</view>
				</view>
				
				<view class="order_option_group">
					<view class="left_more_box">
						<text>更多</text>
					</view>
					<view class="right_option_button_group">
						<view class="button_box" v-if="orderState == 0 || orderState == 4">
							<text>删除订单</text>
						</view>
						<view class="button_box" v-if="orderState == 1" @click="getOrderAddress('1')">
							<text>修改地址</text>
						</view>
						<view class="button_box" v-if="orderState == 2 || orderState == 3">
							<text>申请退款</text>
						</view>
						<view class="button_box" v-if="orderState == 1">
							<text>取消订单</text>
						</view>
						<view class="button_box huigo_button" v-if="orderState == 2 || orderState == 3">
							<text>再次购买</text>
						</view>
						<view class="button_box pay_button" v-if="orderState == 1">
							<text>去支付</text>
						</view>
						<view class="button_box require_wu_button" v-if="orderState == 3">
							<text>确认收货</text>
						</view>
						<view class="button_box bargin_button" v-if="orderState == 0 || orderState == 4" @click="getCommodityEvaluation()">
							<text>立即评价</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 运输流程 -->
			<view class="order_stata_liner_group" v-if="orderState > 1">
				<view class="order_stata_title_box">
					<text>订单状态</text>
				</view>
				<view class="order_stata_steps_group">
					<u-steps :current="orderState == 2 ? 0 : orderState == 4 ? 3 : orderState == 3 ? 2 : 1" activeColor="#f83600" inactiveColor="#aaaaaa">
						<u-steps-item title="已下单" desc="10:30">
						</u-steps-item>
						<u-steps-item title="已出库" desc="10:35" ></u-steps-item>
						<u-steps-item title="运输中" desc="11:40"></u-steps-item>
						<u-steps-item title="已送达" desc="18:40"></u-steps-item>
					</u-steps>
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order_number_group">
				<view class="order_number_box">
					<view class="left">
						<text>订单编号:</text>
					</view>
					<view class="right">
						<text>2222222222222222222222222</text>
					</view>
				</view>
				<view class="order_number_box">
					<view class="left">
						<text>支付方式:</text>
					</view>
					<view class="right">
						<text>微信支付</text>
					</view>
				</view>
				<view class="order_number_box">
					<view class="left">
						<text>下单时间:</text>
					</view>
					<view class="right">
						<text>2022-8-8 12:4:44</text>
					</view>
				</view>
				<view class="order_number_box">
					<view class="left">
						<text>发货时间:</text>
					</view>
					<view class="right">
						<text>2022-8-8 12:4:44</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 订单状态
				orderState: '',
				orderStateList: [
					{
						iamgeUrl: require('../../../../static/order_detail/dfk.png'),
						state: '等待买家付款'
					},
					{
						iamgeUrl: require('../../../../static/order_detail/dfh.png'),
						state: '等待商家发货'
					},
					{
						iamgeUrl: require('../../../../static/order_detail/dsh.png'),
						state: '商家已发货'
					},
					{
						iamgeUrl: require('../../../../static/order_detail/dpj.png'),
						state: '等待买家评价'
					}
				]
			};
		},
		onLoad(option) {
			this.getPageTitle(option.state);
		},
		methods: {
			// 设置页面的标题
			getPageTitle(state) {
				let text = '';
				this.orderState = state;
				switch (state) {
					case '1':
						text = '待付款';
						break;
					case '2':
						text = '待发货';
						break;
					case '3':
						text = '待收货';
						break;
					case '4':
						text = '待评价';
						break;
					default: 
						text = '订单详情';
						break;
				}
				uni.setNavigationBarTitle({
					title: text
				})
			},
			// 跳转到商品详情
			getShoppingDetail() {
				uni.navigateTo({
					url: '/pages/shoppingDetail/shoppingDetail'
				})
			},
			// 跳转到收货地址
			getOrderAddress(index) {
				uni.navigateTo({
					url: '/pagesA/main/customerMyCenter/shippingAddress/shippingAddress?key=' + index
				})
			},
			// 跳转到评价页面
			getCommodityEvaluation() {
				uni.navigateTo({
					url: '/pagesA/main/customerMyCenter/commodityEvaluation/commodityEvaluation'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'orderDetail.scss';
</style>
